<template>
  <div class="body_bgi full pt_50">
    <div class="w_full h_full-50 relative ph_20 flex_column_start scroll_box overflow_y_auto">
      <div 
        class="w_full h_150 p_10 mb_10 relative" 
        :class="formatBgc(index)"
        v-for="(item, index) in roomList" :key="index"
        @click="goToPage(item)"
      >
        <div class="w_full flex_row_between flex_center fs_1rem">
          <div class="color_fff">{{ item.id }}号房间</div>
          <div class="w_60 h_20 lh_20 bgc_0000003a text_center color_e98151 fs_17 border_radius_5" v-if="item.isFinished == 0">{{ formatRoomState(item.isFinished) }}</div>
          <div class="w_60 h_20 lh_20 bgc_0000003a text_center color_6DC88E fs_16 border_radius_5" v-if="item.isFinished == 1">{{ formatRoomState(item.isFinished) }}</div>
          <div class="w_60 h_20 lh_20 bgc_0000003a text_center color_ff2c64 fs_16 border_radius_5" v-if="item.isFinished == 2">{{ formatRoomState(item.isFinished) }}</div>
        </div>

        <div class="w_full h_60 lh_60 flex_row_between absolute_center">
          <div class="w_65_p fs_2rem main_text fw_bold text_right font_zh ls_5">{{ item.contestName }}</div> 
          <div class="w_35_p fs_1rem main_text font_zh text_left pl_5 pt_5">比赛</div>
        </div>
      </div>

      <h5-footer />
    </div>

    <Tabbar />
  </div>
</template>

<script>
  import { getRoomList } from '@/api/index.js'
  import { Toast } from 'vant';
  import H5Footer from '@/components/Footer.vue'
  import Tabbar from '@/components/tabbar.vue';

  export default {
    name: 'selectRoom',
    components: { H5Footer, Tabbar },
    data() {
      return {
        roomList: [],
        timer: null
      }
    },
    mounted() {
      this.judgeLogin()

      this.initFunc()

      // 获取 房间列表
      // this.getRoomList()
    },
    methods: {
      judgeLogin() {
        let token = window.sessionStorage.getItem('token')

        if (!token) {
          Toast.fail({
            duration: 2000,
            message: '请登录！'
          })

          this.$router.push('/login')
        }
      },

      initFunc() {
        Toast.loading({
          duration: 1000, 
          forbidClick: true,
          message: '加载中...',
        });

        this.timer = setInterval(() => {
          if (this.roomList.length) {
            clearInterval(this.timer)
          } else {
            let token = window.sessionStorage.token
            if (token) {
              // 获取 房间列表
              this.getRoomList()
            }
          }
        }, 500)
      },

      // 获取 房间列表
      async getRoomList() {
        let res = await getRoomList()
        try {
          if (res.code == 1000) {
            let sortdict = {
              "1": 1,
              "0": 2,
              "2": 3
            }

            this.roomList = res.data.sort((a, b) => sortdict[a.isFinished] - sortdict[b.isFinished])
          }
        } catch(err) {
          console.log('获取房间列表失败 : ', err);
        }
      },

      // 格式化 房间状态
      formatRoomState(val) {
        let result = ''
        if (val == 0) {
          result = '未开始'
        } else if (val == 1) {
          result = '进行中'
        } else {
          result = '已结束'
        }

        return result
      },

      goToPage(item) {
        if (item.isFinished == 0) {
          Toast.fail({
            duration: 2000,
            message: '当前活动未开始！'
          })
          return false
        }

        if (item.isFinished == 2) {
          Toast.fail({
            duration: 2000,
            message: '当前活动已结束！'
          })
          return false
        }

        window.sessionStorage.setItem('roomId', item.id)

        let path = ''
        if (item.isType == 0) {
          path = `/sheep-score/${item.id}/${item.contestId}/${item.contestName}`
        } else {
          path = `/person-list/${item.id}/${item.contestId}`
        }
        this.$router.push(path)
      },

      // 格式化 背景颜色
      formatBgc(val) {
        let bgc = ''
        if (val == 0) {
          bgc = 'bgc_1'
        } else if (val == 1) {
          bgc = 'bgc_2'
        } else if (val == 2) {
          bgc = 'bgc_3'
        } else {
          bgc = ''
        }

        return bgc
      }
    }
  }
</script>

<style>
  .bgc_1 { background-image: url('~@/assets/image/room1.png'); background-size: 100% 100%; }
  .bgc_2 { background-image: url('~@/assets/image/room2.png'); background-size: 100% 100%; }
  .bgc_3 { background-image: url('~@/assets/image/room3.png'); background-size: 100% 100%; }
</style>